<template lang="html">
  <div class="container">
    <header>
      <!-- <div class="nabvar">
        <div class="nabvar-title">
          <div class="navbar-logo">
            <i class="material-icons">terrain</i>
            <span> Logo </span>
          </div>
        </div>
        <div class="navbar-nav">
          <transition name="fade">
            <ul v-if="!SEARCH_VISIBLE">
              <li><a href="#">首页</a></li>
              <li><a href="#">鲸闻</a></li>
              <li><a href="#">社区</a></li>
              <li><a href="#">兴趣小组</a></li>
              <li><a href="#">直播</a></li>
              <li><a href="#">甩甩尾巴</a></li>
              <li><a href="#">客户端</a></li>
            </ul>
          </transition>
          <transition name="slide">
            <div class="navbar-search" v-if="SEARCH_VISIBLE">
              <span><i class="material-icons">search</i></span>
              <input type="text" v-focus placeholder="搜索你感兴趣的.." >
              <span @click="visible()"><i class="material-icons">clear</i></span>
            </div>
          </transition>
        </div>
        <div class="navbar-menu">
          <ul>
            <li>
              <i
               class="material-icons"
               v-if="!SEARCH_VISIBLE"
               @click="visible()"
               >search</i>
            </li>
            <li>
              <nuxt-link to="/login">登录</nuxt-link>
            </li>
          </ul>
        </div>
      </div> -->
      <v-navbar></v-navbar>
      <div class="navbar-footer">
        <div class="navbar-footer-content">
          <h2>
            <a href="#">西闻</a>
            <span>人文和科技的交汇</span>
          </h2>
        </div>
      </div>
      <div class="carousel">
        <div class="carousel-banner">
          <div class="carousel-left">

          </div>
          <div class="carousel-center"
           @mouseenter="buttonVisible(),stopTumbleweed()"
           @mouseleave="buttonVisible(),startTumbleweed()"
           >
              <div class="swiper-button" v-if="BUTTON_VISIBLE" @click="!animated?startSlideLeft():false">
                <i class="material-icons">chevron_left</i>
              </div>
              <div class="swiper-button" v-if="BUTTON_VISIBLE" @click="!animated?startSlideRight():false">
                <i class="material-icons">chevron_right</i>
              </div>
              <div class="wrapper" :style="{left: position + 'px'}">
                <div
                class="img"
                v-for="(item,index) in data"
                > {{ index }} </div>
              </div>

            <div class="carousel-center-footer">
              <div class="dots">
                <div
                v-for="(item, index) in dots" class="dot"
                :class="{ focuson : index === focusIndex }"
                @click=" focusDot(index)"></div>
              </div>
            </div>
          </div>
          <div class="carousel-right">

          </div>

        </div>
      </div>
    </header>

    <section></section>
    <footer></footer>
  </div>
</template>

<script>

// import data from './data'
import { vDropdownUl, vDropdownLi, vNavbar } from '~/components/common'

export default {

  components: {
    vDropdownUl,
    vDropdownLi,
    vNavbar
  },
  data () {
    return {
      // data: data,
      dots: 5,
      index: 0,
      scroll: 0,
      prevDot: 0,
      clickDot: 0,
      slideleft: 0,
      slideright: 0,
      focusIndex: 0,
      newPosition: 0,
      position: -600,
      animated: false,
      IS_HOVER: false,
      BUTTON_VISIBLE: false,
      start: true
    }
  },
  methods: {
    // 轮播按钮可见性
    buttonVisible () {
      this.BUTTON_VISIBLE = !this.BUTTON_VISIBLE
    },
    // 左滑动偏移量
    slideLeft () {
      if (this.position < this.newPosition) {
        this.position = this.position + 20
        console.log(this.position)
      } else {
        this.animated = false
        this.slideleft = clearInterval(this.slideleft)
        if (this.newPosition > -600) {
          this.position = -3000
        }
      }
    },
    // 左滑动偏移量
    startSlideLeft () {
      this.animated = true
      this.newPosition = this.position + 600
      this.slideleft = setInterval(this.slideLeft, 10)
      this.focusIndex = this.focusIndex - 1
      if (this.focusIndex < 0) {
        this.focusIndex = 4
      }
    },
    // slideRight () {
    //   if (this.position > this.newPosition) {
    //     this.position = this.position - 20
    //   } else {
    //     this.animated = false
    //     clearInterval(this.slideright)
    //     if (this.position < -3000) {
    //       this.position = -600
    //     }
    //   }
    // },
    startSlideRight () {
      this.animated = true
      this.newPosition = this.position - 600
      this.slideright = setInterval(this.slideRight, 10)
      this.focusIndex = this.focusIndex + 1
      if (this.focusIndex > 4) {
        this.focusIndex = 0
      }

      function slideRight () {
        if (this.position > this.newPosition) {
          this.position = this.position - 20
          setTimeout(this.slideRight, 20)
        } else {
          this.animated = false
          if (this.position < -3000) {
            this.position = -600
          }
        }
      }
      slideRight()
    },
    startTumbleweed () {
      this.scroll = setInterval(this.startSlideRight, 2000)
    },
    stopTumbleweed () {
      clearInterval(this.scroll)
    },
    focusDot (index) {
      this.prevDot = this.focusIndex
      this.focusIndex = index
      console.log('prev=' + this.prevDot + ' focusIndex=' + this.focusIndex)
      if (this.prevDot > index) {
        this.newPosition = (600 * (this.prevDot - index)) + this.position
      } else if (this.prevDot < index) {
        this.newPosition = -((index - this.prevDot) * 600) + this.position
      }
      this.clickDot = setInterval(this.startClickDot, 10)
    },
    startClickDot () {
      if (this.newPosition > this.position) {
        this.position = this.position + 50
      } else if (this.newPosition < this.position) {
        this.position = this.position - 30
      } else {
        this.clickDot = clearInterval(this.clickDot)
      }
    }
  },
  mounted: function () {
    this.startTumbleweed()
  }
}
</script>

<style lang="scss" scoped>

* {
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;

  header {

    .navbar-footer {
      color: #333;
      height: 80px;
      margin-top: 60px;
      background-color: #fff;
      box-shadow: 0 15px 15px rgba(15, 37, 64, 0.1);

      .navbar-footer-content {
        width: 1200px;
        margin: 0 auto;

        h2 {
          position: relative;
          text-align: left;
          display: inline-block;
          a {
            color: #424E65;
            font-weight: 500;
            text-decoration: none;
            height: 80px;
            line-height: 80px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 20px;
          }

          a:before {
            content: '';
            position: absolute;
            left: 58px;
            top: 30px;
            width: 1px;
            height: 20px;
            background-color: #e5e5e5;
            z-index: 0;
          }

          span {
            font-weight: 500;
            font-size: 16px;
            height: 80px;
            line-height: 80px;
            display: inline-block;
            vertical-align: middle;
            color: #666;
          }
        }
      }
    }

    .carousel {
      height: 660px;
      padding: 60px 0px;
      overflow-x: hidden;
      position: relative;

      .carousel-banner {
        width: 1200px;
        margin: 0 auto;
        background-color: #555;
        height: 640px;
        padding: 60px 0px;
        position: relative;

        .carousel-left {

          width: 360px;
          height: 420px;
          margin-right: 20px;
          background-color: #888;
          display: inline-block;
          /* overflow: hidden; */
        }

        .carousel-center {
          position: relative;
          z-index: 999;
          width: 600px;
          height: 400px;
          cursor: pointer;
          margin-right: 15px;
          display: inline-block;
          background-color: transparent;

          .swiper-button {
            width: 60px;
            height: 60px;
            position: absolute;
            border-radius: 30px;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 4;
            user-select: none;
            i {
              color: #fff;
              width: 60px;
              height: 60px;
              font-size: 32px;
              text-align: center;
              line-height: 60px;
            }
          }

          .swiper-button:nth-child(1) {
            top: 170px;
            left: 30px;
          }

          .swiper-button:nth-child(2) {
            top: 170px;
            right: 30px;
          }

          .dots {
            position: absolute;
            width: 600px;
            height: 20px;
            z-index: 5;
            bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 5px;
            cursor: -webkit-grab;

            .dot {
              margin: 0px 5px;
              width: 6px;
              height: 6px;
              border-radius: 3px;
              background-color: rgba(0, 0, 0, .6);
              cursor: pointer;
            }
            .focuson {
              background-color: #fff;
            }
          }

          .wrapper {
            display: flex;
            height: 400px;
            position: absolute;

            .img {
              width: 600px;
              height: 400px;
              background-color: #999;

            }
            // .img:nth-child(1) {
            //   background-color: #da8dd4;
            // }
            // .img:nth-child(2) {
            //   background-color: #aa8844;
            // }
            // .img:nth-child(3) {
            //   background-color: #ccaa88;
            // }
            // .img:nth-child(4) {
            //   background-color: #ee3311;
            // }
            // .img:nth-child(5) {
            //   background-color: #a48874;
            // }
            // .img:nth-child(6) {
            //   background-color: #da8dd4;
            // }
            // .img:nth-child(7) {
            //   background-color: #aa8844;
            // }
          }
        }

        .carousel-right {

          width: 200px;
          height: 276px;
          background-color: #678678;
          display: inline-block;
        }
      }
    }
  }
}
</style>
